<template>
	<view class="">
		<NavBarVue :title="options.id ? '修改档案' : '添加档案'"></NavBarVue>
		<view class="bg-white px-30 py-20" style="padding-bottom: 60rpx;">
			<view class="">
				<!--  -->
				<FromList class="mb-20" title="昵称">
					<uni-easyinput :styles="{background: 'transparent'}" style="text-align: right;" :inputBorder="false"
						v-model="from.nickname" placeholder="请输入昵称(1-6个字)" />
				</FromList>
				<!--  -->
				<FromList class="mb-20" title="关系">
					<picker :range="relatList" :value="from.relat" class="flex items-center"
						@change="e=>from.relat=e.detail.value">
						<view class="flex justify-between items-center">
							<text class="">{{relatList[from.relat]}}</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</picker>
				</FromList>
				<!--  -->
				<FromList class="mb-20" title="性别">
					<view class="flex">
						<view class="flex justify-center items-center ml-20" @click="from.gender=0">
							<view class="box-gender rounded-full flex items-center justify-center" :class="{active1: from.gender==0}"
								:style="{background:from.gender==0?'#FD6CFF':'#fff'}">
								<ImageBoxVue src="/static/icons/w_w_man.png" width="28rpx" height="28rpx" v-if="from.gender==0">
								</ImageBoxVue>
								<ImageBoxVue src="/static/icons/g_w_man.png" width="28rpx" height="28rpx" v-if="from.gender==1">
								</ImageBoxVue>
								<text class="ml-10">女</text>
							</view>
						</view>
						<view class="flex justify-center items-center ml-20" @click="from.gender=1">
							<view class="box-gender rounded-full flex items-center justify-center" :class="{active: from.gender==1}"
								:style="{background:from.gender==1?'#329EFF':'#fff'}">
								<ImageBoxVue src="/static/icons/g_man.png" width="28rpx" height="28rpx" v-if="from.gender==0">
								</ImageBoxVue>
								<ImageBoxVue src="/static/icons/w_man.png" width="28rpx" height="28rpx" v-if="from.gender==1">
								</ImageBoxVue>
								<text class="ml-10">男</text>
							</view>
						</view>
					</view>
				</FromList>
				<!--  -->
				<FromList class="mb-20" title="出生时间">
					<!-- <picker mode="date" :value="from.birthday_str" class="flex items-center"
						@change="e=>from.birthday_str=e.detail.value">
						<view class="flex justify-between items-center">
							<text class="">{{from.birthday_str}}</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</picker> -->
					<view class="flex justify-end items-center" @click="handleBirthday">
						<view><text class="" v-if="from.birthday_str">{{from.birthday_str}}</text></view>
						<uni-icons type="right" size="18"></uni-icons>
					</view>
					<!-- <uni-datetime-picker type="datetime" v-model="from.birthday_str">
						<view class="flex justify-end items-center">
							<view><text class="" v-if="from.birthday_str">{{from.birthday_str}}</text></view>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</uni-datetime-picker> -->
				</FromList>
				<!--  -->
				<FromList class="mb-20" title="出生地">
					<!-- <picker mode="multiSelector" :range="areaList" :value="from.area" class="flex items-center"
						@change="e=>from.area=e.detail.value">
						<view class="flex justify-between items-center">
							<text class="" v-if="from.area.length>0">{{from.area}}</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</picker> -->
					<uni-data-picker placeholder="请选择出生地" popup-title="请选择出生地" :localdata="cityJSON" v-model="from.birthplace"
						@change="onBirthplace">
						<view class="flex justify-end items-center">
							<view><text class="" v-if="from.birthplace">{{from.birthplace}}</text></view>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</uni-data-picker>
				</FromList>
				<!--  -->
				<FromList class="mb-20" title="现居地">
					<uni-data-picker placeholder="请选择现居地" popup-title="请选择现居地" :localdata="cityJSON" v-model="from.residence"
						@change="onResidence">
						<view class="flex justify-end items-center">
							<view><text class="" v-if="from.residence">{{from.residence}}</text></view>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</uni-data-picker>
				</FromList>
				<!--  -->
				<view class="bg-[#FFF7EF] rounded-lg p-20 mb-10">
					<text class="text-[#D93E29]">【注】</text>
					<text class="text-[#D29978]">若不确定具体信息，出生时间可选择中午12:00、出生地点可选择默认北京市，会对结果有一定影响</text>
				</view>
				<!--  -->
				<FromList class="mb-20" title="时区">
					<picker :range="timeList" :value="from.time" class="flex items-center" @change="e=>from.time=e.detail.value">
						<view class="flex justify-between items-center">
							<text class="">{{timeList[from.time]}}</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</picker>
				</FromList>
				<!--  -->
				<FromList class="mb-20" title="生日提醒">
					<switch />
				</FromList>
				<!--  -->
				<view class="btn-submit mt-40 flex justify-center" @click="onSave">
					<text class="">{{options.id ? '修改档案' : '添加档案'}}</text>
				</view>
				<!-- <button type="primary" class="rounded-full mt-30" @click="onSave">{{options.id ? '修改档案' : '添加档案'}}</button> -->
			</view>
		</view>
		<select-calendar ref="refCalendar" @backData="backData"></select-calendar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import FromList from '@/components/FromList.vue';
	import selectCalendar from '@/components/select-calendar-v3/index.vue'
	import config from "@/config/index.js"
	import userApi from '@/apis/apiList/userApi';
	import cityJSON from "@/static/city.json"
	import dayjs from "dayjs"
	const back = () => {
		uni.navigateBack()
	}
	const text = ref("")
	const relatList = config.relatList
	const timeList = ["北京时间", "纽约时间", "东京时间"]
	const timeListZone = [8, 5, 9]
	const areaList = [
		["北京市", "四川省"],
		["成都市", "绵阳市"],
	]
	const from = ref({
		nickname: "", //档案昵称
		birthday_str: "", //出生日期
		relat: 0, //关系
		gender: 0, //性别
		birthplace: "",
		residence: "",
		birthpro: null, //出生地:省
		birthcity: null, //出生地:市
		birthdis: null, //出生地:区县
		respro: null, //现居地:省
		rescity: null, //现居地:市
		resdis: null //现居地:区县
	})
	const refCalendar = ref(null)
	const info = ref({})
	const options = ref({})
	onLoad((_options) => {
		if (_options.id) {
			options.value = _options
		}
		options.value.id && getDossierinfoByid()
	})
	const handleBirthday = () => {
		refCalendar.value.openCalendar(info.value, 1940, 2050)
	}
	const backData = (info) => {
		console.log(info)
		info.value = info
		if (info.date) {
			from.value.birthday_str = dayjs(`${info.date} ${info.$chou}:${info.$cmin}`).format('YYYY-MM-DD HH:mm:ss')
		}
	}

	const onBirthplace = (val) => {
		from.value.birthpro = val.detail.value[0].value //出生地=省
		from.value.birthcity = val.detail.value[1].value //出生地=市
		from.value.birthdis = val.detail.value[2].value //出生地=区县
		console.log(val)
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			success: (addr) => {
				console.log(addr)
			}
		})
	}
	const onResidence = (val) => {
		from.value.respro = val.detail.value[0].value //出生地=省
		from.value.rescity = val.detail.value[1].value //出生地=市
		from.value.resdis = val.detail.value[2].value //出生地=区县
	}

	function getDossierinfoByid() {
		userApi.getDossierinfoByid({
			id: options.value.id
		}).then(res => {
			let {
				data
			} = res
			from.value.nickname = data.nickname
			from.value.birthday_str = dayjs(data.birthday).format('YYYY-MM-DD HH:mm:ss')
			from.value.relat = data.relat
			from.value.gender = data.gender
			from.value.birthplace = data.birthdis
			from.value.residence = data.resdis
			from.value.birthpro = data.birthpro //出生地:省
			from.value.birthcity = data.birthcity //出生地:市
			from.value.birthdis = data.birthdis //出生地:区县
			from.value.respro = data.respro //现居地:省
			from.value.rescity = data.rescity //现居地:市
			from.value.resdis = data.resdis //现居地:区县
			from.value.time = timeListZone.indexOf(data.timezone)
			info.value = {
				calendarType: 'solar',
				date: dayjs(data.birthday).format('YYYY-MM-DD HH:mm:ss')
			}
			console.log(from.value.time, '???????')
		})
	}

	const onSave = () => {
		if (!from.value.hasOwnProperty('time')) {
			uni.showToast({
				icon: 'none',
				title: "请选择时区"
			})
			return
		}
		let params = {
			...from.value,
			timezone: timeListZone[from.value.time],
			"member.id": uni.getStorageSync('user').id
		}
		if (options.value.id) {
			params.id = options.value.id
		}
		userApi[params.id ? 'memberEditDossier' : 'addDossier'](params).then(res => {
			uni.showToast({
				icon: 'none',
				title: "成功",
			})
			setTimeout(() => {
				back()
			}, 1000)
		}).catch(err => {
			uni.showToast({
				icon: 'none',
				title: err.msg
			})
		})
	}
</script>
<style lang="scss" scoped>
	.box-gender {
		width: 270rpx;
		height: 70rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #E0EBF1;

		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}

		&.active1 {
			border-color: #FD6CFF;

			text {
				color: #fff;
			}
		}

		&.active {
			border-color: #329EFF;

			text {
				color: #fff;
			}
		}
	}

	.btn-submit {
		background: url(/static/test/btn_pay_blue.png) no-repeat;
		background-size: cover;
		height: 90rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		padding-top: 14rpx;
	}
</style>